<template>
  <div class="rule-desc-page">
    <static-header-module title="活动规则" :scroll-height="0" />
    <div
      id="rule-content"
      class="rule-content"
      :style="{ paddingTop: paddingTop }"
      v-html="ruleText"
    ></div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import ua from '@/util/ua'

export default {
  components: {
    StaticHeaderModule: () =>
      import('@/components/modules/HeaderBarModule/StaticHeaderModule')
  },
  data () {
    return {

    }
  },
  computed: {
    ...mapGetters('main', ['pageContent']),
    paddingTop () {
      if (ua.isIphone && !ua.isIphoneXup) {
        return '1.8rem'
      } else if (ua.isIphoneXup) {
        return '2.0rem'
      } else {
        return '1.4rem'
      }
    },
    ruleText () {

      return this.pageContent.ruleText.replace(/\n/g, '</br>')
    }
  },
  mounted () {
    if (tool.IS_NATIVE()){
      window.App.gestureAble({ able: 'N', wkWebViewAble: 'Y' })
    }
    let activityCode = this.$route.params.activityCode
    tool.sendQdas({
      eventId: '8888111702',
      customAttributes: {
        activity_code: activityCode,
        item_name: '规则-曝光'
      }
    })
  },
  methods: {
    ...mapMutations('main', ['setPageContent', 'editComponent']),
  }
}
</script>

<style lang="less" scoped>
.rule-desc-page {
  background-color: #ffffff;
  .rule-content {
    padding: 22px;
    padding-top: 70px;
    display: flex;
    min-height: 680px;

    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 24px;
  }
}
</style>
